<template>
	<view class="wrap">
		<view class="form-box">
			<u--form ref="form" :model="formData" :rules="rules" 
				labelPosition="left" labelWidth="80" :labelStyle="labelStyle"
			>
				<u-form-item label="收货人" prop="username" borderBottom>
					<u--input type="text" v-model="formData.username" fontSize="14px" border="none" placeholder="姓名"></u--input>
				</u-form-item>
				<u-form-item label="联系电话" prop="phone" borderBottom>
					<u--input type="number" v-model="formData.phone" fontSize="14px" border="none" placeholder="手机号码"></u--input>
				</u-form-item>
				<u-form-item label="所在地区" prop="area" borderBottom>
					<u--input type="text" v-model="formData.area" fontSize="14px" border="none" placeholder="省,市,区/县"></u--input>
				</u-form-item>
				<u-form-item label="详细地址" prop="address" borderBottom>
					<u--input type="text" v-model="formData.address" fontSize="14px" border="none" placeholder="街道门牌信息"></u--input>
				</u-form-item>
				<u-form-item prop="isDefault">
					<u-checkbox-group v-model="formData.isDefault" shape="circle" size="14px">
					    <u-checkbox name='Y' label="设为默认地址" label-size="14px" label-color="#303133" active-color="#d62222"></u-checkbox>
					</u-checkbox-group>
				</u-form-item>
			</u--form>	
			
			<view class="add-box">
				<button type="default" class="btn" @click="submit">提交</button>
			</view>
		</view>		
	</view>	
</template>

<script>
import { addressAdd, addressUpdate, addressDetail } from "@/api/uc/address.js";	
export default {
	onLoad(options) {
		if(options.from != undefined) {
			this.from = options.from;
		}
		
		if(options.id != undefined) {
			uni.setNavigationBarTitle({
				title: '修改收货地址'
			});
			
			this.formData.id = options.id;
			this.init();	
		}
		
	},
	data() {
		return {
			from: 'addressList',
			labelStyle: {
				fontSize: '14px',
				color: '#303133'
			},
			formData: {
				id: 0,
				username: '',
				phone: '',
				area: '',
				address: '',
				isDefault: []
			},
			rules: {
				username: [{
					required: true,
					message: '必填，不能为空',
					trigger: ['blur', 'change']
				}],
				phone: [{
					required: true,
					message: '必填，不能为空',
					trigger: ['blur', 'change']
				}],
				area: [{
					required: true,
					message: '必填，不能为空',
					trigger: ['blur', 'change']
				}],
				address: [{
					required: true,
					message: '必填，不能为空',
					trigger: ['blur', 'change']
				}]
			}
		}
	},
	methods: {
		init() {
			addressDetail(this.formData.id).then(res=>{
				this.formData = res.data.address;
				if(this.formData.isDefault == 'Y') {
					this.formData.isDefault = ['Y'];
				} else {
					this.formData.isDefault = [];
				}
			});
		},
		submit() {
			this.$refs.form.validate().then(() => {
				if(this.formData.isDefault.length > 0) {
					this.formData.isDefault = 'Y';
				} else {
					this.formData.isDefault = 'N';
				}
				
				if(this.formData.id > 0) {
					addressUpdate(this.formData).then(res=>{
						uni.navigateBack();
					});
				} else {
					addressAdd(this.formData).then(res=>{
						if(this.from == 'settle') {
							let pages = getCurrentPages();	// 获取当前面页栈实例
							let prevPage = pages[pages.length - 2]; // 上一页面
							prevPage.$vm.selectedAddress(res.data.id);
						}
						uni.navigateBack();
					});
				}
				
			}).catch(err => {});
		}
	}
}	
</script>

<style lang="less" scoped>
.wrap {
	display: flex;
	flex-direction: column;
	background: #f4f4f4;
	height: 100vh;
	padding: 0 24rpx;
	box-sizing: border-box;
}	

.form-box {
	margin: 24rpx;
	
	.add-box {
		padding: 24rpx 0;
		
		.btn {
			display: flex;
			flex-direction: row;
			justify-content: center;
			width: 640rpx;
			height: 36px;
			line-height: 36px;
			color: #fff;
			font-size: 14px;
			background: #d62222;	
		}
	}
}
	
	
</style>